
{% stylesheet %}
.block_slides{
  width: 100%;
  max-width: var(--general_layout_width);
  margin: 0 auto;
  position:relative;
}
.block_slides .slides {
    max-width: 1200px;
    text-align: center;
    overflow: hidden;
    position: relative;
    display: flex;
    justify-content: center;
    margin: 0 auto;
}
.slides-fill {
    width: 100%;
    max-width: 100%;
}

.slides-fill .slide-item-content {
    box-sizing: border-box;
    left: 50%;
    transform: translateX(-50%);
}

.slides-fill .swiper-small {
    max-width: 1200px !important;
    box-sizing: border-box;
    left: 50%;
    transform: translateX(-50%);

}

.block_slides  .slide-item {
    display: block;
    height: 100%;
    background-repeat: no-repeat;
    background-position: center;
    background-size: auto 100%;
    position: relative;

}


.block_slides  .slide-item-big {
    height: 800px;
    width: 100%;
    object-fit: cover;
}

.block_slides  .slide-item-center {
    height: 600px;
    width: 100%;
    object-fit: cover;

}
.block_slides  .slide-item-samll {
    height: 420px;
    width: 100%;
    object-fit: cover;
}
.block_slides  .slide-item-auto {
    height: auto;
    width: 100%;
    object-fit: cover;
}


.block_slides .slide-item-mask {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 100;
}

.block_slides .slide-item-content {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 100%;
    margin: 0 auto;
    display: flex;
    padding: 0 50px;
    flex-direction: column;
    justify-content: center;
    z-index: 110;
    box-sizing: border-box;
}

.block_slides .slide-item-content-left {
    align-items: flex-start;
}
.block_slides .slide-item-content-left .slide-item-title{
    text-align: left;
}
.block_slides .slide-item-content-left .slide-item-des {
    text-align: left;
    max-width: 385px;

}

.block_slides .slide-item-content-right {
    align-items: flex-end;
}

.block_slides .slide-item-content-right .slide-item-des {
    text-align: right;
    max-width: 385px;

}

.block_slides .slide-item-content-center {
    align-items: center;

}

.block_slides .slide-item-content-center .slide-item-des {
    max-width: 800px;
    text-align: center;
}

.block_slides .slide-item-content-right .slide-item .slide-item-des,
.block_slides .slide-item-content-left .slide-item .slide-item-des {
    max-width: 385px;
}



.block_slides .slide-item .slide-item-title {
    font-size: 56px;
    font-weight: 300;
    color: #ffffff;
    font-size: var(--title_font_size);
    color: var(--title_color);
    font-family: var(--title_font_family);
    font-style: var(--title_font_style);
    font-weight: var(--title_font_weigth);
    letter-spacing: var(--title_letter_spacing);
}

.block_slides .slide-item .slide-item-line {
    width: 50px;
    margin-top: 30px;
    border: 1px solid #ffffff;
}

.block_slides .slide-item .slide-item-des {
    margin-top: 30px;
    font-size: 16px;
    line-height: 24px;
    color: #fff;
}

.block_slides .swiper-small {
    position: absolute;
    bottom: 20px;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 80px;
    z-index: 100;
    box-sizing: border-box;
}

.block_slides .swiper-small .swiper-small-warp {
    overflow: hidden;
}

.block_slides .swiper-small .swiper-small-container {
    display: flex;
    align-items: center;
    transition: all 0.25s;
}

.block_slides .swiper-small .swiper-small-hanle {
    display: flex;
    align-items: center;
    float: left;
    padding: 0 10px;
}

.block_slides .swiper-small .swiper-small-item {
    width: 10px;
    height: 10px;
    box-sizing: border-box;
    border: 2px solid #ffffff;
    border-radius: 50%;
    margin: 0 10px;
}

.block_slides .swiper-small .swiper-small-item-active {
    background-color: #ffffff;
}

.block_slides .carousel-panel {
    width: 100%;
    overflow: hidden;
}

.block_slides .carousel-panel-container {
    display: flex;
    height: 100%;
    width: 100%;
    position: relative;
    overflow: hidden;
}

.block_slides .carousel-panel-container .carousel-panel-container-item {
    flex-shrink: 0;
    width: 100%;
    height: 100%;
    cursor: pointer;
}






 .block_slides .block-image-mobile{
    display: none;
  }
@media screen and (max-width: 768px) {
    .block_slides .slide-item .slide-item-title{
      font-size: calc(var(--title_font_size) * var(--wap_title_scale));
    }
    .block_slides .slide-item .slide-item-des{
        font-size: 14px;
    }

    .block_slides  .slide-item-big {
        height: 100vh;
    }
    .block_slides  .slide-item-center {
        height: 70vh;
    }
    .block_slides  .slide-item-samll {
        height: 50vh;
    }
    .block_slides .slide-item-content{
      padding:0 30px;
    }
}
@media screen and (max-width: 767px) {
    .block_slides .slide-item .slide-item-des{
        font-size: 14px;
        margin-top: 15px;
    }
    .block_slides .block-image-mobile{
        display: block;
    }
    .block_slides .block-image-pc{
        display: none;
    }
    .block_slides  .slide-item-big {
        height: 100vh;
    }
    .block_slides  .slide-item-center {
        height: 70vh;
    }
    .block_slides  .slide-item-samll {
        height: 50vh;
    }
    .block_slides .slide-item-content{
        padding: 80px 15px 0;
    }


}

.block_slides .block_slides_prev,
.block_slides .block_slides_next{
    position: absolute;
    right: 40px;
    bottom: -20px;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0px 6px 6px 0px #ffffff01;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 99;
    transition: all 0.3s;
}
.block_slides .block_slides_prev{
    right: 95px;
}
.block_slides .block_slides_prev:hover,
.block_slides .block_slides_next:hover{
    transform: scale(1.1);
}
.block_slides .block_slides_prev svg,
.block_slides .block_slides_next svg{}
.block_slides .block_slides_next svg{
    transform: rotate(-180deg);
}

{% endstylesheet %}
<div class="block_slides slides {% if section.settings.is_width_fill %}slides-fill{% endif %}">
    <div class="carousel-panel-container swiper-carousel-{{ block_id | default : section.block_id }}" id="swiper-carousel-{{ block_id | default : section.block_id }}">
        {% if section.blocks | size %}
        <input type="hidden" class="imgNumber" value="{{section.blocks | size}}"/>
        <ul class="swiper-wrapper">
            {% for block in section.blocks %}
            <li class="swiper-slide">
            {%- if block.button_text == "" -%}
              <a href="{{block.link | setUrlDataFrom:data_from}}" style="position: absolute;top: 0;left: 0;right: 0;bottom: 0;z-index:100"></a>
            {%- endif -%}
              
              {% capture cropType %}
              {%- unless section.settings.height  == 'auto' -%}
              data-crop-type="height"
              {%- endunless -%}
              {% endcapture %}
            
                <div class="slide-item carousel-panel-container-item">
                  <a href="{{block.link | setUrlDataFrom:data_from}}">
                    {% if block.pc_image.src != "" %}
                    <img data-src="{{ block.pc_image.src|public_front_asset_url }}" {{cropType}} src="{{ 'banner_loading.png' | public_asset_abs_dir_url }}"  alt="{{ block.pc_image.alt }}" class="slide-item-img slide-item-{{ section.settings.height }} block-image-pc" />
                    {% else %}
                    <img  {{cropType}} src="{{ 'banner@2x.png' | public_asset_abs_dir_url }}"   class="slide-item-img slide-item-{{ section.settings.height }} block-image-pc" />
                    {% endif %}

                    {% if block.pc_image.src != "" or block.mobile-image.src != "" %}
                    <img data-src="{{ block.mobile-image.src | default:block.pc_image.src|public_front_asset_url  }}" {{cropType}} src="{{ defaultImageEmpty }}" alt="{{ block.mobile-image.alt }}" class="slide-item-img slide-item-{{ section.settings.height }} block-image-mobile" />
                    {% else %}
                    <img  {{cropType}} src="{{ 'banner@2x.png' | public_asset_abs_dir_url }}"   class="slide-item-img slide-item-{{ section.settings.height }} block-image-mobile" />
                    {% endif %}
                  
                    <div class="slide-item-mask" style="background-color:{{ block.mask_color }};opacity: {{ block.mask | divided_by : 100  }};"></div>
                    <div class="slide-item-{{ block_id | default : section.block_id }} slide-item-content slide-item-content-{{ block.position }} {% if section.settings.is_fill %}full_container_wrapper{% else %}container_wrapper{% endif %}">
                        <h2 class="slide-item-title" style="color:{{ block.title_color }}">{{ block.title }}</h2>
                       {% if block.subtitle != "" %}
                        <div class="slide-item-des" style="color:{{ block.title_color }}">{{ block.subtitle|html_content_filter }}</div>
                        {% endif %}
                        {% if block.button_text %}
                        <span class="slide-item-btn main_btn" style="background-color:{{ block.button_background_color }};color:{{ block.button_font_color  }}">{{ block.button_text }}</span>
                        {% endif %}
                    </div>
                  </a>
                </div>
            </li>
            {% endfor %}
        </ul>
        {% else %}
        <ul class="swiper-wrapper">
             <li class="swiper-slide">
                <div class="slide-item carousel-panel-container-item">
                    <img src="{{ 'banner@2x.png' | public_asset_abs_dir_url }}"  class="slide-item-img slide-item-{{ section.settings.height }}" />
                </div>
            </li>
        </ul>
        {% endif %}
    </div>
    {% if section.blocks.size > 1 %}
    <a class="block_slides_prev" href="javascript:void(0);">
        <svg class="" width="24" height="24" xmlns="http://www.w3.org/2000/svg"><path d="M8.06 12.428a.6.6 0 0 1 0-.848l6.152-6.152a.3.3 0 0 1 .424 0l.594.594a.3.3 0 0 1 0 .424l-5.558 5.558 5.558 5.558a.3.3 0 0 1 0 .424l-.594.594a.3.3 0 0 1-.424 0L8.06 12.428z"></path></svg>
    </a>
    <a class="block_slides_next" href="javascript:void(0);">
        <svg class=" tw-rotate-180" width="24" height="24" xmlns="http://www.w3.org/2000/svg"><path d="M8.06 12.428a.6.6 0 0 1 0-.848l6.152-6.152a.3.3 0 0 1 .424 0l.594.594a.3.3 0 0 1 0 .424l-5.558 5.558 5.558 5.558a.3.3 0 0 1 0 .424l-.594.594a.3.3 0 0 1-.424 0L8.06 12.428z"></path></svg>
    </a>
    {% endif %}

</div>
<div class="card-script">
<script type="text/javascript">
$(function() {
    var sildesSwiper =  new Swiper('.swiper-carousel-{{ block_id | default : section.block_id }}', {
        {% if section.blocks.size >1  %}loop: true,{% endif %}
        watchOverflow: true,
        autoHeight: true,
        autoplay:{% if section.settings.is_play and section.blocks.size >1  %}{delay: Number('{{section.settings.duration}}') * 1000}{% else %}false{% endif %},
        {% if section.blocks.size >1  %}
        {% endif %}
        navigation: {
            nextEl: '.block_slides_next',
            prevEl: '.block_slides_prev',
        }
    })
    var num = $('#swiper-carousel-{{ block_id | default : section.block_id }} .imgNumber').val();
    if(num == 1){
        $('#swiper-carousel-{{ block_id | default : section.block_id }} .block_slides_prev').hide();
        $('#swiper-carousel-{{ block_id | default : section.block_id }} .block_slides_next').hide();
    }
    var block = {{section.blocks|pubic_front_imgcdn_replace|json}};
    if(block.length){
      moi.addEvent('lazyImg', function(event) {
          if (event.params && block.findIndex(item => {
            return item.pc_image.src == event.params || item['mobile-image'].src == event.params
          }) > -1) {
            sildesSwiper.updateAutoHeight()
          }
      })
    }
})
</script>
</div>

{% schema %}
{
	"tag": "",
	"class": "block_slides",
	"is_global": false,
	"name": {
		"zh_CN": "轮播图",
		"en_US": "Slideshow"
	},
	"max_blocks": "10",
	"blocks": [
		{
			"name": {
				"zh_CN": "轮播图片",
				"en_US": "Slide image"
			},
			"type": "slide-item",
			"settings": [
				{
					"type": "card_image",
					"label": {
						"zh_CN": "pc端图片",
						"en_US": "Image on PC"
					},
					"default": {
						"src": "",
						"alt": ""
					},
					"info": {
						"zh_CN": "尺寸建议：大-1920*800px，中-1920*600，小-1920*420",
						"en_US": "Suggested size: large -1920*800px, medium -1920*600, small -1920*420"
					},
					"id": "pc_image"
				},
				{
					"type": "card_image",
					"label": {
						"zh_CN": "移动端图片",
						"en_US": "Mobile image"
					},
					"default": {
						"src": "",
						"alt": ""
					},
					"info": {
						"zh_CN": "尺寸建议1242*2000px",
						"en_US": "Size suggested 1242*2000px"
					},
					"id": "mobile-image"
				},
				{
					"type": "card_select",
					"label": {
						"zh_CN": "标题按钮位置",
						"en_US": "Title button location"
					},
					"id": "position",
					"option": [
						{
							"label": {
								"zh_CN": "居左",
								"en_US": "To the left"
							},
							"value": "left"
						},
						{
							"label": {
								"zh_CN": "居中",
								"en_US": "In the center"
							},
							"value": "center"
						},
						{
							"label": {
								"zh_CN": "居右",
								"en_US": "To the right"
							},
							"value": "right"
						}
					],
					"default": "center"
				},
				{
					"type": "card_color",
					"label": {
						"zh_CN": "标题颜色",
						"en_US": "Header color"
					},
					"default": "#fff",
					"id": "title_color"
				},
				{
					"type": "card_input",
					"label": {
						"zh_CN": "标题",
						"en_US": "Title"
					},
					"id": "title",
					"default": "Image banner"
				},
				{
					"type": "card_text_editor",
					"label": {
						"zh_CN": "简短描述",
						"en_US": "Short description"
					},
					"id": "subtitle",
					"default": "Share information about your brand with your customers. Describe a product, make announcements, or welcome customers to your store."
				},
				{
					"type": "card_page_link",
					"label": {
						"zh_CN": "跳转链接",
						"en_US": "Jump links"
					},
					"id": "link",
					"default": {
						"type": "",
						"title": "",
						"url": ""
					}
				},
				{
					"type": "card_input",
					"label": {
						"zh_CN": "按钮名称",
						"en_US": "Button name"
					},
					"id": "button_text",
					"default": "BUTTON LABEL"
				},
				{
					"type": "card_color",
					"label": {
						"zh_CN": "按钮背景",
						"en_US": "Button background"
					},
					"id": "button_background_color",
					"default": "#1D1F21"
				},
				{
					"type": "card_color",
					"label": {
						"zh_CN": "按钮文字颜色",
						"en_US": "Button text color"
					},
					"id": "button_font_color",
					"default": "#fff"
				},
				{
					"type": "card_slider",
					"label": {
						"zh_CN": "蒙层透明度",
						"en_US": "Mask transparency"
					},
					"id": "mask",
					"max": "100",
					"min": "0",
					"default": "0"
				},
				{
					"type": "card_color",
					"label": {
						"zh_CN": "蒙层颜色",
						"en_US": "Mask color"
					},
					"id": "mask_color",
					"default": "#000"
				}
			]
		}
	],
	"settings": [
		{
			"type": "card_header",
			"label": {
				"zh_CN": "设置",
				"en_US": "Settings"
			}
		},
		{
			"type": "card_switch",
			"label": {
				"zh_CN": "自动轮播",
				"en_US": "Automatic slide"
			},
			"id": "is_play",
			"default": true
		},
		{
			"type": "card_slider",
			"label": {
				"zh_CN": "轮播时间(s)",
				"en_US": "Slide time (s)"
			},
			"default": "3",
			"max": 5,
			"min": 1,
			"id": "duration"
		},
		{
			"type": "card_select",
			"label": {
				"zh_CN": "图片高度",
				"en_US": "Image height"
			},
			"id": "height",
			"option": [
				{
					"label": {
						"zh_CN": "大",
						"en_US": "Big"
					},
					"value": "big"
				},
				{
					"label": {
						"zh_CN": "中",
						"en_US": "Middle"
					},
					"value": "center"
				},
				{
					"label": {
						"zh_CN": "小",
						"en_US": "Small"
					},
					"value": "samll"
				},
				{
					"label": {
						"zh_CN": "自适应",
						"en_US": "Adaptive"
					},
					"value": "auto"
				}
			],
			"default": "auto"
		},
		{
			"type": "card_switch",
			"label": {
				"zh_CN": "宽度铺满",
				"en_US": "Spread the width"
			},
			"id": "is_width_fill",
			"default": true
		},
		{
			"type": "card_header",
			"label": {
				"zh_CN": "内容",
				"en_US": "Content"
			}
		}
	],
	"default": {
		"settings": {
			"is_play": true,
			"duration": "3",
			"height": "auto",
			"is_width_fill": true
		},
		"blocks": [
			{
				"pc_image": {
					"src": "",
					"alt": ""
				},
				"mobile-image": {
					"src": "",
					"alt": ""
				},
				"position": "center",
				"title_color": "#fff",
				"title": "Image banner",
				"subtitle": "Share information about your brand with your customers. Describe a product, make announcements, or welcome customers to your store.",
				"link": {
					"type": "",
					"title": "",
					"url": ""
				},
				"button_text": "BUTTON LABEL",
				"button_background_color": "#1D1F21",
				"button_font_color": "#fff",
				"mask": "0",
				"mask_color": "#000",
				"block_type": "slide-item"
			}
		]
	}
}
{% endschema %}